<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo--入门02</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	#div1{
		width: 100px;
		height: 100px;
		background: red;
		border:10px solid gray;
		padding-left: 10px;
		margin-left:20px;
	}


</style>
</head>
<body>

	<div id="div1">#div1</div>


<script type="text/javascript">

$(function(){

//取到宽度100px,因为带 px ,所以在例如做一些游戏时这个获取到的100px不好转换数值
	//alert($("#div1").css('width'))//直接获取width样式的数值
	
//jq 为方便用户而定义的获取宽度的方法 （高度同理）
	alert( $("#div1").width() )//本体宽度
	alert( $("#div1").innerWidth() )//计算本体宽度+padding值
	alert( $("#div1").outerWidth() )//本体宽度+边框宽度+padding值宽度
	//本体宽度+边框宽度+padding值宽度+margin宽度
	alert( $("#div1").outerWidth(true) )



})



</script>


</body>
</html>